<template>
  <div id="tabbar">
    <div class="content">
      <div class="logo">
        <router-link to="/home"><img src="../../static/img/logo.png" style="width: 130px;height: 50px"></router-link>
      </div>
      <div class="right">
        <el-input
          placeholder="Search!"
          v-model="keyword"
          @keyup.native.13="search">
          <i @click="search" slot="suffix" class="el-input__icon el-icon-search"></i>
        </el-input>

        <el-link icon="iconfont iconkehuzhuangtai" v-if="this.role===''" disabled>游客</el-link>
        <el-link icon="iconfont iconkehuzhuangtai" v-else disabled>{{role}}</el-link>
        <el-link v-if="!isLogin" icon="iconfont icondenglu" @click="clicklogin">登录</el-link>
        <el-link v-if="!isLogin" @click="getRegister" icon="iconfont iconzhuce">注册</el-link>

        <el-dropdown v-else>
          <el-link @click="getprofile">
            <el-avatar v-if="isimgUrl" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            <el-avatar v-else :src="imgUrl"></el-avatar>
          </el-link>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>{{username}}</el-dropdown-item>
            <el-dropdown-item>积分：{{point}}</el-dropdown-item>
            <el-dropdown-item v-if="!reg"><el-button type="primary" @click="sign_in">签到</el-button></el-dropdown-item>
            <el-dropdown-item v-else><el-button type="primary" disabled="">已签</el-button></el-dropdown-item>
            <el-dropdown-item><el-button type="primary" @click="logout">注销</el-button></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <el-link icon="iconfont icontougao" v-if="!typerole" @click="gotoPublich">投稿</el-link>
        <el-link icon="iconfont icontougao" v-if="typerole">发帖</el-link>
        <el-link icon="iconfont icontougao" v-if="typerole" @click="gotoXiaoxi">消息</el-link>
      </div>
    </div>

    <el-dialog
      title="登录"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <div class="loginform">
        <el-form label-width="80px" :model="formLogin">
          <el-form-item label="账号">
            <el-input v-model="formLogin.username" placeholder="请输入手机号或邮箱或用户名" ></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password" v-model="formLogin.password" placeholder="请输入密码"></el-input>
          </el-form-item>

          <el-form-item label="验证码">
            <el-input style="width: 64%" type="text" v-model="formLogin.nums" placeholder="请输入"></el-input>

            <div class="loginnums"><a @click="clicklogin"><img style="height: 40px" :src="codeImg" alt="图片加载失败" /></a></div>
          </el-form-item>

        </el-form>
      </div>
      <el-checkbox v-model="checked">记住密码</el-checkbox>
      <el-link target="_blank" @click="forgetpwd">忘记密码</el-link>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sumbit">登 录</el-button>
      </span>
    </el-dialog>

    <navigation_bar/>
  </div>
</template>

<script>
  import navigation_bar from './Navigation_bar.vue'
  export default {
    name: "one",
    components: {
      navigation_bar
    },
    data () {
      return {
        typerole: false,
        codeImg:'',
        centerDialogVisible: false,
        checked: false,
        isLogin: false,
        username: '',
        imgUrl: '',
        role: '',
        keyword: '',
        formLogin: {
          username: '',
          password: '',
          nums: ''
        },
        isimgUrl: true,
        signtime: '',
        reg:false,		//是否已经签到
        point: ''
      }
    },
    watch: {
      //监听登录的弹框一关闭就让里面的值为空
      centerDialogVisible: function (isshow) {
        if (!isshow) {
          this.formLogin.username=''
          this.formLogin.password=''
          this.formLogin.nums = ''
        }
      }
    },
    methods: {
      //显示图片验证码
      getimg() {
        this.$http({
          url: '/user/img'
        }).then(res => {
          this.codeImg = 'data:image/png;base64,' + res.data
        })
      },
      //点击登录
      clicklogin(){
        this.formLogin.nums = ''
        this.centerDialogVisible = true
        this.getimg()
      },
      //去到注册
      getRegister () {
        this.$router.push('/register')
      },
      //提交登录表单
      sumbit() {
        if (this.formLogin.username===''||this.formLogin.password===""||this.formLogin.nums===""){
          this.$message.error('必填项不能为空');
        }else {
          this.$http({
            method: 'post',
            url: '/user/login/'+this.formLogin.username+'/'+this.formLogin.password+'/'+this.formLogin.nums,
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then(res=>{
            console.log(res.data);
            if (res.data!=null){
              this.$message('登录成功');
              this.centerDialogVisible=false
              this.$store.commit('setuser',res.data)
              this.username = res.data.username
              this.imgUrl = res.data.info.image
              this.point = res.data.info.points
              this.role = res.data.role.name
              if (res.data.role.name == '专家'){
                this.typerole = true
              }else {
                this.typerole = false
              }
              this.signtime = res.data.sign_Newdate
              this.isLogin = true
              if (this.imgUrl!=null){
                this.isimgUrl = false
              }
              //时间戳
              if (this.signtime !== undefined) {
                const a = new Date(this.signtime)
                let old = new Date(a.toLocaleDateString()).getTime()
                //获取当前时间
                let myDate = new Date();
                let today = new Date(myDate.toLocaleDateString()).getTime()
                const size = today - old
                if (size>=86400000){
                  this.reg = false
                } else {
                  this.reg = true
                }
              }
            } else {
              this.$message.error('账号或密码错误，请重新输入');
              this.formLogin.username=''
              this.formLogin.password=''
              this.formLogin.nums = ''
              this.getimg()
            }
          }).catch(err=>{
          })
        }
      },
      //点击忘记密码
      forgetpwd () {
        this.centerDialogVisible=false
        this.$router.push('/fogetpwd')
      },
      //点击进入个人中心
      getprofile() {
        this.$http({
          url: '/user/updatePage'
        }).then(res => {
          console.log(res.data)
          this.$store.commit('setuserInfo',res.data)
          if (res.data.hobby !==''){
            console.log(res.data.hobby);
            const hobbies = res.data.hobby.split(',')
            this.$store.commit('sethobby',hobbies)
          }
          this.$router.push('/profile')
        }).catch(err => {
          console.log(err);
        })
      },
      //点击投稿
      gotoPublich () {
        if (this.$store.state.user.uid ==='') {
          this.$message.error("请先登录")
        }else {
          this.$router.push('/publich')
        }
      },
      //点击消息
      gotoXiaoxi () {
        this.$router.push('/xiaoxi')

      },
      //签到
      sign_in () {
        this.$http({
          method: 'post',
          url: '/user/getPoints/'+new Date(),
        }).then(res => {
          this.$store.commit('setpoints',res.data)
          this.reg = true
          console.log(res.data);
          this.point = res.data
        }).catch(err => {
          console.log(err);
        })
      },
      //点击搜索
      search() {
        this.$router.push('/search/'+this.keyword)
      },
      //注销
      logout () {
        this.isLogin = false
        this.$store.commit('setuserout',{uid: ''})
        this.$store.commit('setuserInfo',{})
        const path = this.$route.path.split('/')
        if (path[1] ==='profile'||path[1] ==='publich'||path[1] ==='biji') {
          this.$router.replace('/home')
        }
        this.$http({
          url: '/user/logout'
        }).then(res => {
          console.log(res.data);
        }).catch(err => {})
      },
    }
  }
</script>

<style scoped>
  #tabbar{
    background-color: #ffffff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    width: 100%;
  }
  .loginnums{
    float: right;
    height: 40px;
    margin-right: 30px;
  }
  .content{
    width: 1200px;
    margin: 0 auto;
    height: 60px;
  }
  .logo{
    float: left;
    margin: 10px 5px;
  }
  .right{
    float: right;
    margin: 14px 5px;
    size: 15px;
  }
  /deep/ .el-input{
    width: 390px;
    margin-right: 7px;
  }
  /deep/ .el-link{
    margin-left: 5px;
  }
  /deep/ .el-input__inner{
    border-radius: 30px;
  }
  .loginform /deep/ .el-input{
    width: 300px;
  }
  .loginform /deep/ .el-input .el-input__inner{
    border-radius: 3px;
  }
  /deep/ .el-dialog__body .el-checkbox:last-of-type {
    margin-right: 0;
    margin-left: 80px;
  }
  /deep/ .el-dialog__body .el-link {
    margin-left: 150px;
  }
  /deep/ .el-dropdown-menu__item {
    margin: 2px;
  }
</style>
